<template>
    <!--定义表格-->
    <BasicTable @register="registerTable">
        <!-- 左侧插槽 -->
        <template #tableTitle>
            <a-button type="primary" preIcon="ant-design:plus-outlined" @click="handleCreate"> 新增</a-button>
            <a-button type="primary">导入</a-button>
            <a-button type="primary">导出</a-button>
        </template>
        <!--操作栏-->
        <template #action="{ record }">
            <TableAction :actions="getTableAction(record)" />
        </template>
    </BasicTable>

    <customerAddModel  @register="registerAddModal"/>

</template>

<script lang="ts" name="basic-table-demo" setup>
import { ActionItem, BasicColumn, BasicTable, TableAction } from '/@/components/Table';
import { useListPage } from '/@/hooks/system/useListPage';
import { useModal } from '/@/components/Modal';
import customerAddModel from './customerAddModel.vue';

import { columns } from './customer.data';
import { list, saveOrUpdateUser } from './customer.api';

//注册model
const [registerAddModal, { openModal: openAddModal }] = useModal();

// 列表页面公共参数、方法
const { tableContext } = useListPage({
    designScope: 'xl-customer',
    tableProps: {
        api: list,
        columns: columns,
        actionColumn: {
            width: 200,
        },
    },
});
//BasicTable绑定注册
const [registerTable,{},{}] = tableContext;
 //注册table数据
 //const [registerTable, { reload, updateTableDataRecord }, { rowSelection, selectedRows, selectedRowKeys }] = tableContext;

/**
 * 操作栏
 */
function getTableAction(record): ActionItem[] {
    return [
        {
            label: '编辑',
            onClick: handleMarkAsPayed.bind(null, record),
        },
        {
            label: '问题反馈',
            onClick: handleMarkAsPayed.bind(null, record),
        },
        {
            label: '标记为已支付',
            onClick: handleMarkAsPayed.bind(null, record),
        },
    ];
}
function handleCreate() {
    console.log("11");
    openAddModal(true,{"1":1});
}
function handleMarkAsPayed(record) {
    console.log(record);
}
</script>

<style scoped></style>